<template>
	<div
		v-if="showRightContainer"
		:class="[rightPartClass ? rightPartClass : 'treeRight']"
	>
		<el-row>
			<el-col :span="24" v-for="(item, index) in dataList" :key="index">
				<p class="pt20 pb20">{{ item.title }}</p>
				<el-table
					v-loading="tableLoading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="item.tableDataList"
					style="width: 100%;margin-bottom:15px"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						v-for="(itm, indexs) in item.tableDataColumn"
						:key="indexs"
						:label="itm.label"
						:min-width="itm.minWidth"
						:align="itm.align"
						:show-overflow-tooltip="itm.showTip"
					>
						<template slot-scope="{ row }">
							<!-- 自动定插槽渲染 -->
							<span v-if="itm.renderType === 'slot'">
								<slot
									:name="itm.slotName"
									:rowData="row"
								></slot>
							</span>
							<!-- 金额渲染 -->
							<span v-if="itm.renderType === 'amount'">
								{{ handleCurrency(row['currency']) }}
								{{
									handleNumber(row['currency'], row[itm.prop])
								}}
							</span>
							<!-- 数量渲染 -->
							<span v-if="itm.renderType === 'num'">
								{{ handleNumber('', row[itm.prop], 0) }}
							</span>
							<!-- 百分比例渲染 -->
							<span v-if="itm.renderType === 'percentage'">
								<p>
									{{ handlePercentage(row[itm.prop]) }}
								</p>
							</span>
							<!-- 默认渲染 -->
              <span v-if="itm.renderType === 'defautlSolt'">
								{{ row[itm.prop] || '-' }}
							</span>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<el-tabs v-model="activeName" @tab-click="tabClick" class="mt20">
			<el-tab-pane
				v-for="(item, index) in tabTitle"
				:key="index"
				:label="item.label"
				:name="item.name"
			>
				<el-table
					v-loading="tabTableLoading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tabTableList"
					style="width: 100%"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<template v-for="(itm, index) in tabTableColumn">
						<el-table-column
							:key="index"
							:label="itm.label"
							:min-width="itm.minWidth"
							:align="itm.align"
							:show-overflow-tooltip="itm.showTip"
						>
							<template slot-scope="{ row }">
								<!-- 自动定插槽渲染 -->
								<span v-if="itm.renderType === 'slot'">
									<slot
										:name="itm.slotName"
										:rowData="row"
									></slot>
								</span>
								<!-- 金额渲染 -->
								<span v-if="itm.renderType === 'amount'">
									{{ handleCurrency(row['currency']) }}
									{{
										handleNumber(
											row['currency'],
											row[itm.prop]
										)
									}}
								</span>
								<!-- 数量渲染 -->
								<span v-if="itm.renderType === 'num'">
									{{ handleNumber('', row[itm.prop], 0) }}
								</span>
								<!-- 百分比例渲染-->
								<span v-if="itm.renderType === 'percentage'">
									{{ handlePercentage(row[itm.prop]) }}
								</span>
								<!-- 默认渲染 -->
								<span v-if="itm.renderType === 'defautlSolt'">
									{{ row[itm.prop] }}
								</span>
							</template>
						</el-table-column>
					</template>
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
import list from '@/mixins/list'

export default {
	name: 'TreeRightDetailComponent',
	mixins: [list],
	props: {
		// 带标题表格下loading
		tableLoading: {
			type: Boolean,
			default: false
		},
		// 选项卡下表格loading
		tabTableLoading: {
			type: Boolean,
			default: false
		},
		// 是否显示组件
		showRightContainer: {
			type: Boolean,
			default: true
		},
		// tree右边自已定义class样式
		rightPartClass: {
			type: String,
			default: ''
		},
		// 右边部分标题以及标题下表格数据
		dataList: {
			type: Array,
			default: () => []
		},
		// 选项卡切换标题数组，包含name和label
		tabTitle: {
			type: Array,
			default: () => []
		},
		// 选项卡下表格数据
		tabTableList: {
			type: Array,
			default: () => []
		},
		// 选项卡下切换表格列名
		tabTableColumn: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			activeName: this.tabTitle[0].name
		}
	},
	mounted() {},
	methods: {
		tabClick() {
			this.$emit('getTabSelectVal', this.activeName)
		}
	}
}
</script>
<style lang="scss" scoped>
.treeRight {
	width: calc(100% - 245px);
	display: flex;
	-o-display: flex;
	-ms-display: flex;
	-webkit-display: flex;
	-moz-display: flex;
	flex-direction: column;
	-o-flex-direction: column;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
}
</style>
